<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outter{
            width: 640px;
            margin: 50px auto;
            text-align: center;
        }
    </style>
    <script>
           window.onload = function(){

                const img = document.getElementsByTagName("img")[0]
                const prev = document.getElementById("prev")
                const next = document.getElementById("next")
                const info = document.getElementById("info")


                

                const arrayimg = [
                    "./images/1.png",
                    "./images/2.png",
                    "./images/3.png",
                    "./images/4.png",
                    "./images/5.png"
                ]
                    

                
                let num = 0

                info.textContent = `共${arrayimg.length}张图，现在是第${num + 1}张`

                prev.onclick = function(){
                    num--

                    if( num < 0 ){
                        num = arrayimg.length - 1
                    }
                    img.src = arrayimg[num]
                    
                    info.textContent = `共${arrayimg.length}张图，现在是第${num + 1}张`
                }

                next.onclick = function(){
                    num++
                    if( num > arrayimg.length - 1){
                        num = 0
                    }
                    img.src = arrayimg[num]
                    info.textContent = `共${arrayimg.length}张图，现在是第${num + 1}张`
                }
                
           }
    </script>
</head>
<body>
    <div class="outter">
        <p id="info">
            共5张图，现在是第1张
        </p>
            
        <div class="img-wrapper">
            <img src="./images/1.png" alt="">
            
        </div>

        <div class="btn-wrapper">
            <button id="prev">上一张</button>
            <button id="next">下一张</button>
        </div>
        
    </div>
</body>
</html>